<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<header class="navigation" id="sticky-nav">
<div class="container">
<div class="top-logo">
<a href="#"><img src="https://i.ibb.co/zG54csq/logo.png"></a>
</div>
<nav id='cssmenu' class="navigation">
<div id="head-mobile"></div>
<div class="button"></div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li class="has-sub"><span class="submenu-button"></span><a href="services.html">Services</a>
<ul class="sub-menu">
<li><a href="services.html">Services</a></li>
<li><a href="coaching.html">Coaching</a></li>
<li><a href="workshop.html">Workshops</a></li>
<li><a href="retreats.html">Retreats</a></li>
</ul>
</li>
<li><a href="delight-clients.html">Delighted Clients</a></li>
<li><a href="contact.html">Contact</a></li>
<!-- <li class="book_trip"><a href="#"><i class="fa fa-map-marker"></i> Book Your Trip</a></li>-->
</ul>
</nav>
</div>
</header>
.top-logo {
width: 15%;
float: left;
}
header{
background:#FFEB3B;
color:#fff;
}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #head-mobile {
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
nav#cssmenu {
text-align: right;
line-height: 0;
}
.navigation.sticky.scrolling nav#cssmenu {
text-align: center;
margin-top: 10px;
float: none;
}
.navigation.sticky.scrolling .open_status {
display: none;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0
}
#cssmenu #head-mobile {
display: none
}
#cssmenu ul {
float: none;
text-align: center;
display: inline-block;
margin-bottom: 0;
}
#cssmenu > ul > li {
display: inline-block;
align-items: center;
padding-top: 2rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-bottom: 2rem;
}
#cssmenu > ul > li > a {
padding: 10px;
font-size: 14px;
letter-spacing: 0.7px;
text-decoration: none;
color: #333;
font-weight: 500;
text-transform: uppercase;
}
.navigation.sticky.scrolling #cssmenu > ul > li > a {
color: #fff;
}
.navigation.sticky.scrolling #cssmenu > ul > li > a:hover {
color: #3B8BeB;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li:hover > a, #cssmenu ul li.active a {
color: #E91E63;
}
#cssmenu > ul > li:hover,
#cssmenu ul li.active:hover,
#cssmenu ul li.has-sub.active:hover {
-webkit-transition: background .3s ease;
-ms-transition: background .3s ease;
transition: background .3s ease;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 30px !important;
}
#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 40px;
right: 11px;
width: 8px;
height: 2px;
content: '';
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
right: 14px;
display: block;
font-family: FontAwesome;
content: "\f107";
-webkit-transition: all .25s ease;
-ms-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu > ul > li.has-sub > a:before {
color: #ccc;
}
#cssmenu > ul > li.has-sub:hover > a:before {
transform: rotate(180deg);
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
z-index: 1;
background: #fff;
transform-origin: top;
transform: rotateX(-90deg);
transition: transform 0.2s linear;
border-radius: 4px;
}
#cssmenu li:hover > ul {
left: 0;
transform: rotateX(-0deg);
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-ms-transition: all .25s ease;
transition: all .25s ease
}
#cssmenu ul ul li:hover {}
#cssmenu li:hover > ul {
left: 0;
padding-left:0;
}
#cssmenu li:hover > ul > li {
height: 100%;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(19, 17, 17, 0.61);
padding: 11px 15px;
width: 150px;
font-size: 13px;
text-decoration: none;
color: #333;
font-weight: 500;
line-height: 13px;
}
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
border-bottom: 0
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #000;
}
#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #ddd;
content: ''
}
#cssmenu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #ddd;
content: '';
-webkit-transition: all .25s ease;
-ms-transition: all .25s ease;
transition: all .25s ease
}
#cssmenu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0
}
#cssmenu ul ul li.has-sub:hover,
#cssmenu ul li.has-sub ul li.has-sub ul li:hover {
background: #555;
}
#cssmenu ul ul ul li.active a {
border-left: 1px solid #333
}
#cssmenu > ul > li.has-sub > ul > li.active > a,
#cssmenu > ul ul > li.has-sub > ul > li.active > a {
border-top: 1px solid #333
}
@media screen and (max-width:1000px) {
.open_status {
float: left !important;
}
#cssmenu > ul > li > a {
padding: 17px 10px;
background: #121116;
}
#cssmenu > ul > li > a {
padding: 16px 10px;
color: #ccc;
text-align: left;
}
#cssmenu ul {
float: none;
margin-top: 10px;
}
.logo {
max-width: 220px;
margin-left: 15px;
}
.logo2 {
display: none
}
nav {
width: 100%;
}
#cssmenu {
width: 100%;
float: none !important;
}
#cssmenu ul {
width: 100%;
display: none;
padding-left: 0;
}
#cssmenu ul li {
width: 100%;
border-top: 1px solid #999;
}
#cssmenu ul li:hover {
background: #363636;
}
#cssmenu ul ul li,
#cssmenu li:hover > ul > li {
height: auto
}
#cssmenu ul li a,
#cssmenu ul ul li a {
width: 100%;
border-bottom: 0
}
#cssmenu > ul > li {
float: none;
padding:0;
}
#cssmenu ul ul li a {
padding-left: 25px
}
#cssmenu ul ul li {
background: #333 !important;
}
#cssmenu ul ul li:hover {
background: #363636 !important
}
#cssmenu ul ul ul li a {
padding-left: 35px
}
#cssmenu ul ul li a {
color: #ddd;
background: none
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
color: #fff
}
#cssmenu ul ul,
#cssmenu ul ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left
}
#cssmenu > ul > li.has-sub > a:after,
#cssmenu > ul > li.has-sub > a:before,
#cssmenu ul ul > li.has-sub > a:after,
#cssmenu ul ul > li.has-sub > a:before {
display: none
}
#cssmenu #head-mobile {
display: block;
padding: 26px;
color: #ddd;
font-size: 12px;
font-weight: 700;
}
#cssmenu .button {
width: 55px;
height: 46px;
position: absolute;
right: 0;
top: 18px;
cursor: pointer;
z-index: 12399994;
}
#cssmenu .button:after {
position: absolute;
top: 26px;
right: 20px;
display: block;
height: 8px;
width: 20px;
border-top: 2px solid #FF5722;
border-bottom: 2px solid #FF5722;
content: '';
}
.top-logo a img {
max-width: 130px;
width: auto;
padding-top: 5px;
padding-bottom: 10px;
}
#cssmenu .button:before {
-webkit-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
position: absolute;
top: 19px;
right: 20px;
display: block;
height: 2px;
width: 20px;
background: #FF5722;
content: '';
}
#cssmenu .button.menu-opened:after {
-webkit-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
top: 23px;
border: 0;
height: 2px;
width: 19px;
background: #FF5722;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu .button.menu-opened:before {
top: 23px;
background: #FF5722;
width: 19px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#cssmenu .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 1px solid #fff;
height: 46px;
width: 46px;
cursor: pointer
}
#cssmenu .submenu-button.submenu-opened {
background: #262626
}
#cssmenu ul ul .submenu-button {
height: 34px;
width: 34px
}
#cssmenu .submenu-button:after {
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #ddd;
content: ''
}
#cssmenu ul ul .submenu-button:after {
top: 15px;
right: 13px
}
#cssmenu .submenu-button.submenu-opened:after {
background: #fff
}
#cssmenu .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #ddd;
content: ''
}
#cssmenu ul ul .submenu-button:before {
top: 12px;
right: 16px
}
#cssmenu .submenu-button.submenu-opened:before {
display: none
}
#cssmenu ul ul ul li.active a {
border-left: none
}
#cssmenu > ul > li.has-sub > ul > li.active > a,
#cssmenu > ul ul > li.has-sub > ul > li.active > a {
border-top: none
}
}
.top-logo a img {
max-width: 165px;
width: auto;
padding-top: 5px;
}
.open{
display:block;
}
(function($) {
$.fn.menumaker = function(options) {
var cssmenu = $(this), settings = $.extend({
format: "dropdown",
sticky: false
}, options);
return this.each(function() {
$(this).find(".button").on('click', function(){
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.slideToggle().removeClass('open');
}
else {
mainmenu.slideToggle().addClass('open');
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
});
cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function() {
cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
cssmenu.find('.submenu-button').on('click', function() {
$(this).toggleClass('submenu-opened');
if ($(this).siblings('ul').hasClass('open')) {
$(this).siblings('ul').removeClass('open').slideToggle();
}
else {
$(this).siblings('ul').addClass('open').slideToggle();
}
});
};
if (settings.format === 'multitoggle') multiTg();
else cssmenu.addClass('dropdown');
if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
var mediasize = 1000;
if ($( window ).width() > mediasize) {
cssmenu.find('ul').show();
}
if ($(window).width() <= mediasize) {
cssmenu.find('ul').hide().removeClass('open');
}
};
resizeFix();
return $(window).on('resize', resizeFix);
});
};
})(jQuery);
(function($){
$(document).ready(function(){
$("#cssmenu").menumaker({
format: "multitoggle"
});
});
})(jQuery);
